<template>
    <div class="icons">
         <swiper :options="swiperOption">
              <swiper-slide v-for="(page,index) of pages" :key="index" :v-if="flag">
                <div class="icon" v-for="item of page" :key="item.id">
                    <div class="icon-img">
                        <img :src="item.imgUrl" alt="" class="icon-img-content">
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
              </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    name : 'HomeIcons',
    props : {
        IconList : Array
    },
    data() {
       
        return {
            flag : false,
            swiperOption : {
                 pagination : '.swiper-pagination',
                 loop : true,
             },
            
        }
    },
    computed: {
        pages() {``         
            const pages = [];
            console.log(this.IconList)
            this.IconList.forEach((item,index) => {
                const page = Math.floor(index/8)
                 if(!pages[page]){
                     pages[page] = []
                 }
                 pages[page].push(item)
                 
            });
          
           return pages
        }

    },
    mounted() {
        this.flag = true
    },
   
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/minmix.styl';
    .icons >>> .swiper-container
         height: 0
         padding-bottom: 50%
    .icons
         margin-top: .1rem
        .icon
            overflow: hidden
            float: left
            width: 25%
            height: 0
            padding-bottom : 25%
            position : relative
            .icon-img
                position :absolute
                left : 0
                right  : 0
                top : 0
                bottom : .44rem
                box-sizing: border-box
                padding: .1rem
                .icon-img-content
                        display : block
                        margin: 0 auto
                        height: 100%
            .icon-desc
                position :absolute
                left : 0
                right  : 0
                bottom : 0
                height : .44rem
                line-height : .44rem
                text-align : center
                color : #333
                ellipsis()

</style>

